import { Card, Tree, Row, Col, Tag, Pagination, Table,Button } from 'antd'
import React, { Key, useEffect, useState } from 'react'
import { getFindScheduleListRequest, getHosDepartmentListRequest, getHosScheduleListRequest } from '@api/hospital/hospitalList'
import type { bookingScheduleListType, findScheduleListReturnType, getHosDepartmentListReturnType } from '@api/hospital/model/hospitalListTypes'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalSchedule() {
    const navigate = useNavigate()
    const { hoscode } = useParams()
    //保存科室数据
    const [treeData, setTreeDate] = useState<getHosDepartmentListReturnType>([])
    //当前页
    const [page, setPage] = useState(1)
    //每页数
    const [limit, setLimit] = useState(3)
    //定义当前选中的科室
    const [depCode, setDepCode] = useState("200040878");
    //定义当前科室的排班规则
    const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
    //定义当前科室的排班规则总条数
    const [total, setTotal] = useState(0);
    //定义当前选中的科室日期
    const [workDate,setWorkDate] = useState('1')
    //定义状态保存日期详细
    const [findSchedule,setFindSchedule] = useState<findScheduleListReturnType>([])
    //初始化获取科室
    useEffect(() => {
        const getHosDepartmentList = async () => {
            const re = await getHosDepartmentListRequest(hoscode as string)
            console.log(re);
            
            setTreeDate(re)
        }
        getHosDepartmentList()
    }, [])
    //初始化获取排班规则数据
    useEffect(() => {
        const getHosScheduleList = async () => {
            const re = await getHosScheduleListRequest({ page: page, limit: limit, hoscode: hoscode as string, depcode: depCode as string })
            setScheduleRule(re.bookingScheduleList);
            setTotal(re.total);
            setWorkDate(re.bookingScheduleList[0]?.workDate)
           
        }
        getHosScheduleList()
    }, [page,limit,depCode])
    //初始化获取排班日期详细
    useEffect(() => {
        const getFindSchedule = async () =>{
            const re = await getFindScheduleListRequest({
                hoscode: hoscode as string,
                depcode: depCode,
                workDate: workDate
            })
            setFindSchedule(re)
        }
        getFindSchedule()
    },[workDate,depCode])
    //页数和页码变化
    const changePageHandle = (page:number,pageSize:number) => {
        setPage(page)
        setLimit(pageSize)
    }
    //选中树节点=点击门诊
    const selectDepCodeHandle = (depCodeArr:Key[]) => {
        // console.log(depCodeArr);  
        setDepCode(depCodeArr[0] as string)
    }
    //选中日期
    const selectTimeHandle = (workDateValue:string) => {
        return () => {
            setWorkDate(workDateValue)
        }  
    }
    const columns = [
        {
            title: '序号',
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '职称',
            dataIndex: 'title',
        },
        {
            title: '号源时间',
            dataIndex: 'workDate',
        },
        {
            title: '可预约数',
            dataIndex: 'reservedNumber',
        },
        {
            title: '剩余可预约数',
            dataIndex: 'availableNumber',
        },
        {
            title: '挂号费(元)',
            dataIndex: 'amount',
        },
        {
            title: '擅长技能',
            dataIndex: 'skill',
        },
    ];
    const treeStyle = {
        border: "1px solid #000",
        height: "480px",
        overflow: "auto",
    };
    return (
        <Card>
            <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
            <Row gutter={20}>
                <Col span={5}>
                    <div>
                        <Tree treeData={treeData as []} 
                        expandedKeys={['a4e171f4cf9b6816acdfb9ae62c414d7']} 
                        style={treeStyle} 
                        fieldNames={{ title: "depname", key: 'depcode' }} 
                        onSelect={selectDepCodeHandle}
                    />
                    </div>
                </Col>
                <Col span={19}>
                    <div style={{ marginBottom: '20px' }}>
                        {
                            scheduleRule.map(item => {
                                return (
                                    <Tag key={item.workDate} style={{cursor:'pointer'}} onClick={selectTimeHandle(item.workDate)}>
                                        <p>{item.workDate}</p>
                                        <p>
                                            {item.availableNumber}/{item.reservedNumber}
                                        </p>
                                    </Tag>
                                )
                            })
                        }
                    </div>
                    <Pagination 
                        current={page}
                        pageSize={limit}
                        total={total}
                        onChange={changePageHandle} 
                    />
                    <Table columns={columns} style={{ marginTop: '20px' }} rowKey='id' dataSource={findSchedule} pagination={false}></Table>
                    <Button onClick={() => {navigate(-1)}} style={{marginTop:'30px'}}>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
